<!DOCTYPE html >
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
</head>
<body style="background-color: aquamarine">
    <h2>WELCOME ADMIN</h2>
    <hr style="color: mediumvioletred"/>
    <center><span>查询名称</span></center><br>
    <div>
        查询者名称 <input type="text" id="userName" name="userName"><br>
        <br>
        查询结果：<span id="result"></span><br>
        <input id="queryByName" type="button" value="查询">
    </div>
    <hr>
    一键获取：
    <input type="button" id="queryAll" value="查询所有">
    <div id="allResult"></div>


    <script src="/jquery.js"></script>
    <script type="text/javascript">
        $("#queryByName").click(function () {
            alert("查询ByName");
            if(!$("#userName").val()) {
                alert("不能为空");
                return false;
            }
            //发送AJAX请求
            $.get("/user/queryByName",{"userName": $("#userName").val()},function (response) {
                console.log(response);
                //将span替换为结果,返回的JSon为字符串，需要转为JSON对象，下面的也一样
                response = $.parseJSON(response);
                $("#result").text(response.userName + " :  班级为 " + response.userClass + " 年龄为 " + response.userAge);
            },"text")
        });

       $("#queryAll").click(function () {
            alert("查询所有");
           //发送AJAX请求
           $.get("/user/queryAll",{},function (response) {
                   console.log(response);
                   //将span替换为结果
                   response = $.parseJSON(response); //必须转换，不然each就会报错
                   var result = new String();
                   result += "<table border='10' bordercolor='pink' width= '50%' align= 'center' background= '/cloud.jpg'><tr align='center'><th>姓名</th><th>班级</th><th>年龄</th></tr>";
                   $.each(response,function (index,element) {
                        result += "<tr align='center'><td>" + element.userName + "</td><td>" + element.userClass + "</td><td>" + element.userAge + "</td></tr>";
                   })
                   result += "</table>";
                   $("#allResult").html(result);
               },"text")
        })
    </script>
</body>
</html>